<template v-cloak>
	<view class="wrap" style="position: absolute;">
		<!-- 生成图片 -->
		<view >
			<canvas canvas-id="canvasLineA" id="canvasLineA" style="position: absolute;z-index: -1;top: -600rpx;"
			:width="cWidth*pixelRatio"
			:height="cHeight*pixelRatio" 
			:background="backgroundEchart"
			:style="{'width':cWidth+'px','height':cHeight+'px',}"
			></canvas>
			<l-painter  isCanvasToTempFilePath @success="path = $event" hidden 
			  css="background: #fff;box-sizing: border-box;">
			   <l-painter-image :src="bgImg" css="width: 100vw;height: 460rpx;"/>
			   <l-painter-image :src="codeImg" :css="codeStyle"/>
			   <l-painter-view css="margin:20rpx;">
				   <l-painter-text text="长按保存或识别二维码关注百货行情 千余种品类精准行情每天更新" css="display:block; color: #000; font-size: 24rpx;line-height:40rpx;"/>
				   <l-painter-text :text="detail.productName" css="display:block; color: #000; font-size: 44rpx; height:60rpx;line-height:60rpx;fontWeight: bold;"/>
				   			  
				   <l-painter-view css="display:flex;flex-dection:row;align-items: center;justify-content: center;width:100%;">
					  <l-painter-view css="margin-top:20rpx;height:120rpx;line-height:120rpx;text-align:center;background:#ff6700;color:#fff;border-radius: 20rpx;font-size:50rpx;display:flex;flex-dection:row;align-items: center;justify-content: center;padding:0 20rpx;">
						  
						<l-painter-text :text="day" />
						<l-painter-text :text="checkedType==1?'出货':checkedType==2?'接货':'-'" />
						<l-painter-text :text="'¥' + inputValue" />
					  </l-painter-view>
				   </l-painter-view>
				   
				   <l-painter-view css="display:flex;flex-dection:row;align-items: center;justify-content: flex-start;margin:20rpx 0;">
					   <l-painter-view css="width:12rpx;height:40rpx;background:#ff6700;border-radius:4rpx;margin-right:10rpx;"></l-painter-view>
					   <l-painter-text text="历史行情" css="display:block; color: #000; font-size: 38rpx; height:60rpx;line-height:60rpx;fontWeight: bold;" />
				   </l-painter-view>
				   <l-painter-image :src="zstImage" css="width:100%;" />
			   </l-painter-view>
			   
			   
			</l-painter>
		</view>
		
		
		<!-- <image :src="path" mode="widthFix" style="width:100vw;border: 1rpx #f00 solid;"></image> -->
		
	
		<view class="swiper">
			<image class="bg" :src="bgImg" :show-menu-by-longpress="true" ></image>
            <image :src="codeImg" :show-menu-by-longpress="true" :style="{'position': 'absolute', 'left': codeStyle.left, 'top': codeStyle.top, 'width': codeStyle.width, 'height': codeStyle.height, 'backgroudSize': '100% 100%', 'zIndex': '4'}"></image>
			<view class="hb-btn" :style="{'background':themeColor}" @click="openDialog">生成海报</view>
		</view>
		<view class="card"  style="border-bottom: 20rpx #f8f8f8 solid;">
			<view class="card-top f-r-b">
				<view class="card-title f-r-s">
					<text class="card-title-icon"  :style="{'background':themeColor}"></text>
					<text class="card-title-text ">{{detail.productName}}</text>
				</view>
				
				<view class="card-btn f-r-c " v-if="detail.focusId" :style="{'background':themeColor,'opacity':1,}" @click="guanzhu">
					<uni-icons type="plusempty" size="15" color="#fff"></uni-icons>
					<text>关注</text>
				</view>
				<view class="card-btn f-r-c " v-else :style="{'background':themeColor,'opacity':0.5 ,}" @click="guanzhu">已关注</view>
			</view>
			
			<view class="card-content">
				<view class="price">
					<text class="price-type">批发价</text>
					<text class="price-money" :style="{'color':themeColor}">{{isopen1?(detail.guidePrice?'¥'+detail.guidePrice:'暂无') :'***'}} </text>
					<view class="icon f-r-c" @click="isopen1=!isopen1">
						<uni-icons type="eye-filled" size="19" color="#ccc" v-if="isopen1"></uni-icons>
						<uni-icons type="eye-slash-filled" size="19" color="#ccc" v-else></uni-icons>
					</view>
				</view>
				<view class="price" ></view>
				<view class="price">
					<text class="price-type">指导价</text>
					<text class="price-money" :style="{'color':themeColor}">{{isopen2?(detail.tradePrice?'¥'+detail.tradePrice:'暂无') :'***'}} </text>
					<view class="icon f-r-c" @click="isopen2=!isopen2">
						<uni-icons type="eye-filled" size="19" color="#ccc" v-if="isopen2"></uni-icons>
						<uni-icons type="eye-slash-filled" size="19" color="#ccc" v-else></uni-icons>
					</view>
				</view>
				<view class="price">
					<text class="price-type">行情价</text>
					<text class="price-money" :style="{'color':themeColor}">{{isopen3?(detail.productPrice?'¥'+detail.productPrice:'暂无'):'***'}} </text>
					<view class="icon f-r-c" @click="isopen3=!isopen3">
						<uni-icons type="eye-filled" size="19" color="#ccc" v-if="isopen3"></uni-icons>
						<uni-icons type="eye-slash-filled" size="19" color="#ccc" v-else></uni-icons>
					</view>
				</view>
				
				


			</view>
		</view>
		<view class="card">
			<view class="card-top f-r-b">
				<view class="card-title f-r-s">
					<text class="card-title-icon" :style="{'background':themeColor}"></text>
					<text class="card-title-text">历史行情</text>
				</view>
				<view class="card-nav f-r-b " :style="{'borderColor':themeColor}">
					<view class="card-nav-item f-r-c " :style="{'background':history_bar_index==index?themeColor:'#fff'} "
					 v-for="(item,index) in history_bars" :key="index"  @click="tabChange(index)">
						<text class="card-nav-item-text f-r-c" :style="{'color':history_bar_index==index?'#fff':themeColor} ">{{item.name}}</text>
					</view>
				</view>
			</view>
			<view style="width:calc(100vw - 64rpx);height: 500rpx;">
				
				<view  style="height: 500rpx; width: 100%;background: #fff; ">
				  <qiun-data-charts type="area" v-if="showLine"
				   :opts="{
				        yAxis:{splitNumber:SplitNumber,data:[{unit:'元',}]},
				        xAxis:{marginTop:10,rotateLabel:true,rotateAngle:45,calibration:true,},
				        legend:{show:false,},
				        color:['#EE6666','#FAC858'],
				        padding:[24,10,10,4],
				        dataLabel:false,
				        dataPointShape:false,
						background: '#ff0000',
				        extra:{
				           tooltip:{fontSize:13,boxPadding:2,}, 
				           area:{type:'step',addLine:true,gradient:false,}
				        },
				        
				    }"  
				    :chartData="chartsDataLine" :echartsH5="true" :echartsApp="true"   :canvas2d="canvas2d" />
					
					<div v-if="searchLoading" class="ul-li-loading">
						加载中...
					</div>
					<div v-if="!searchLoading&&list.length==0" class="ul-li-loading" >
						没有数据
					</div>
				</view>
				
			</view>
			
			
		</view>
		<view class="list-box">
			<view class="list-bar f-r-b f-r-nw">
				<view class="f-r-s bar1" >日期</view>
				<view class="f-r-c bar2" >当日价格</view>
				<view class="f-r-c bar3" >涨跌</view>
				
				
			</view>
			<view class="list-table" v-if="!searchLoading">
				<view class="list-li f-r-b f-r-nw" v-for="(item,index) in list" :key="index" >
					<view class="f-r-s bar1">{{item.createTime?$parseTime(item.createTime,'{y}-{m}-{d}'):'-'}}</view>
					<view class="f-r-c bar2" :style="{'color':item.biliType==2?'green':tem.biliType==1?'red': themeColor}">¥{{item.productPrice}}</view>
					<view class="f-r-c bar3" :style="{'color':item.biliType==2?'green':tem.biliType==1?'red': themeColor}">
						<uni-icons type="arrow-up" size="18" :color="red" v-if="item.biliType==1"></uni-icons>
						<uni-icons type="arrow-down" size="18" color="green" v-else-if="item.biliType==2"></uni-icons>
						<view  :style="{'color':themeColor}" v-else>-</view>
						{{item.biliPrice}}
					</view>
				</view>
			</view>
			<div v-if="searchLoading" class="ul-li-loading">
				加载中...
			</div>
			<div v-if="!searchLoading&&list.length==0" class="ul-li-loading" >
				没有数据
			</div>
		</view>

       <uni-popup ref="picPopup"  :mask-click="false" type="center" background-color="#fff">
            <view class="dialog">
                <view class="t1">选择生成图片类型</view>
				<view class="btn red" :class="checkedType==1?'checked1':'' " @click="checkedChange(1)">出货</view>
				<view class="btn blue" :class="checkedType==2?'checked2':'' " @click="checkedChange(2)">接货</view>
				<view class="line"></view>
				<view class="f-r-s t2">
					<uni-icons type="info" size="18" :color="themeColor"></uni-icons>
					<text :style="{'color':themeColor,'marginLeft':'4rpx',}">选择出货/接货价格</text>
				</view>
				<view class="price-picker f-r-s" >
					<input  type="digit" v-model="inputValue" placeholder="选择出货/接货价格"   @input="inputAmount"
					style="width: 80%;color: #f00;font-size: 26rpx;" 
					placeholder-style="color:#999;font-size:26rpx;"/>
				</view>
				<view class="f-r-s t3">今日市场价： ¥{{detail.productPrice}}</view>
				<view class="submit-btn btn btn-s" :style="{'background':themeColor,}" @click="GeneratePoster" hover-class="button-hover">生成</view>
				<view class="submit-btn btn btn-c" @click="closeDialog" hover-class="button-hover">取消</view>
            </view>
        </uni-popup>
	
	  
	</view>
</template>

<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	var canvaLineA=null;
	var _self;
	export default {
		data() {
			return {
				
				productId:null,
				checkedType:0, //1 出货 2 接获
				codeStyle:{},
				bgImg:'',
				detail: {
					productName: '',
					productImg: '',
					code: '',
					id: '',
					guidePrice:0,
					productPrice:0,
					tradePrice:0,
					biliType:0,
					ifgz:false,
				},
				isopen1:true,
				isopen2:true,
				isopen3:true,
				history_bars: [ 
					{name:'7天',id:7,},
					{name:'30天',id:30,},
					{name:'90天',id:90,},
					{name:'一年',id:365,},
					{name:'三年',id:1095,},	
				],
				history_bar_index: 1,
				
				showLine: false,
				canvas2d:true,
				chartsDataLine: {
				    categories:[],
				    series:[
						{
							name:'行情',
							data:[],
						}
					],
				},
				list: [],
				inputValue:'',
				searchLoading:false,
				
				 cWidth:375-32,
				 cHeight:260,
				 backgroundEchart:'rgba(255,255,255,1)',
				 pixelRatio:1,
				 zstImage:'',//折线图的图片
				 path:'',//预览的合成图片地址
				 getImageSuccess:false,
				 codeImg:'',//二维码地址
				 
				 SplitNumber:2,
			

			}
		},
		computed: {
		  themeColor() {
		    return this.$themeColor;
		  },
		  today(){
			  return this.$getToday();
		  },
		  day(){
			  return new Date().getDate().toString().padStart(2, '0')+'日';
		  },
		  
		},
		onLoad(option) {
			
			if(option.detail!=undefined){
				this.detail=JSON.parse(option.detail);
				this.productId=this.detail.id;
				this.inputValue=this.detail.productPrice;
				
				uni.setNavigationBarTitle({
				  title: this.detail.productName,
				});
				this.getCodeStyle();
			}
			this.bgImg=this.$prefix(this.detail.productImg);
			console.log(this.bgImg);
			this.codeImg=this.$prefix(uni.getStorageSync('userinfo').smallShareQrcode);
		},
		onReady() {
		    let that = this;
		    uni.getSystemInfo({
		        success: (res) => {
		            const deviceWidth = res.windowWidth; // 获取设备宽度
		            that.cWidth = deviceWidth-32;
		            console.log("获取设备宽度："+res.windowWidth,"uchart的宽度："+that.cWidth);
		 
		        }
		    });
			this.tabChange(1);
			
			
		
			
		},
		methods: {
			getCodeStyle(){
				let opts={
				    url:`/authMarket/getProductCodeConfig/${this.productId}`,
				    method: 'get'
				};
				this.$http(opts,{}).then(res=>{ 
					let codeInfo;
					if(res.code==200){
						codeInfo=res.data;
						console.log(res.data);
					}else{
						codeInfo=uni.getStorageSync('codeImgInfo');
					}
					this.codeStyle={
						position: "absolute",
						left:codeInfo.distancLeft+'rpx',
						top: codeInfo.distancTop+'rpx',
						width: codeInfo.codeWidth+'rpx',
						height:codeInfo.codeHeight+'rpx',
						backgroundSize: "100%",
					};
				})
			},
			//切换历史行情
			tabChange(index) {
				this.showLine=false;
				this.history_bar_index = index;
				this.getList();
				
			},
			//加载列表 
			getList() {
				this.searchLoading=true;
				 var day=this.history_bar_index>-1? this.history_bars[this.history_bar_index]['id']:7;
				 let opts={
				     url:`/authMarket/getProductHisList/${this.productId}/${day}`,
				     method: 'get'
				 };
				 let that=this;
				 this.$http(opts,{}).then(res=>{
					this.searchLoading=false;
					this.list=res.data.list;
					this.chartsDataLine.categories=res.data.times?res.data.times:null;
					this.chartsDataLine.series[0].data=res.data.price?res.data.price:[];
					this.SplitNumber=this.setSplitNumber(res.data.price);
					this.canvas2d=true;
					this.showLine=true;
					
					this.showLineA('canvasLineA'); //画幅图
					
					
				 })

			},
			// 默认uCharts图表Y轴的分割splitNumber = 5；通常Y轴的数据取整数显示，但是Y轴数据的最大值和最小值之差小于5，所以在数据处理的时候会出现Y轴数据重复
			setSplitNumber(arr){
				let splitNumber = 2;
				if(arr.length!=0){
					let max = Math.max.apply(null,arr);
					let min = Math.min.apply(null,arr);
					if((Number(max) - Number(min) >=5) || (Number(max) - Number(min) == 0)){
						splitNumber =  5;
					}else {
						 splitNumber = Number(max) - Number(min);
					}
					
				}
				console.log('Y轴的分割splitNumber',splitNumber);
				return splitNumber;
			},

			//关注 可以取消关注吗？
			guanzhu(){
				let opts={
				    url:`/authMarket/addOrRemoveFacus/${this.productId}`,
				    method: 'get'
				};
				this.$http(opts,{}).then(res=>{
					if(res.code==200){
						if(this.detail.focusId){
							this.detail.focusId=0;
						}else{
							this.detail.focusId=1;
						}
						
					}
				})
			},
			//生成图片 选择类型
			checkedChange(type){
				this.checkedType=type;
			},
			
			closeDialog(){
				this.$refs.picPopup.close();
				this.canvas2d=true;
			},
			openDialog(){
				this.canvas2d=false;
			    this.checkedType=0;
				this.inputValue=this.detail.productPrice;
				this.$refs.picPopup.open();
				
			},
			//限制只能输入数字
			inputAmount(e){
				console.log(e.detail.value.length,);
				// console.log(e.detail.value.split('.'))//小数不在第一位
				const inputTypeNum =/[^\d.]/g //数字
				this.$nextTick(() => {
					this.inputValue = e.target.value.replace(inputTypeNum, '');
				})
				
				if(e.detail.value=='.'){
					console.log(1)
					this.$nextTick(() => {
						this.inputValue = '';
					})
					return;
				}
				else if((e.detail.value.split('.').length - 1)>1){//保留小数点后2位，大于号嘴边的1可以自己改
					console.log(2)
					this.$nextTick(() => {
						this.inputValue = this.inputValue.substring(0,this.inputValue.length-1);
					})
					return;
				}
				else if(e.detail.value.split('.').length>1){//小数点只能输入一个
					if((e.detail.value.split('.')[1].length>2)){
						console.log(3)
						this.$nextTick(() => {
							this.inputValue = this.inputValue.substring(0,this.inputValue.length-1);
						})
						return;
					}
				}
				//必须小于  20000元
				if(e.detail.value.length>=10){
					console.log("10位数");
					let bol= Number(e.detail.value)>1000000000;
					console.log(4,bol,Number(e.detail.value));
					if(bol){
						this.$nextTick(() => {
							this.inputValue =this.inputValue.substring(0,this.inputValue.length-2);
						})
						return;
					}
					
				}
				
			},
			

			//生成图片
			GeneratePoster(){
				if(this.checkedType==0){
					uni.showToast({
						title:'选择出货/接货',
						icon:'none',
					})
					return false;
				}
				if(this.inputValue=''){
					uni.showToast({
						title:'填写出货/接货今日行情价格',
						icon:'none',
					})
					return false;
				}
				if(!this.path||this.path==undefined){
					uni.showToast({
						title:'生成图片失败',
						icon:'none',
					})
					return false;
				}
				this.closeDialog();
				let list=[];
				list.push(this.path);
				
				let that=this;
				uni.previewImage({
					 urls: list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了       
					 success: function(res) { 
						  
					 }
					
				 })
			
				
			},
			toTempFilePath() {
				let that = this;
				let cansids ='canvasLineA';
				// 将生成的canvas图片，转为真实图片
				wx.canvasToTempFilePath({
					 x: 0,
					 y: 0,
					 canvasId: cansids,//对应要生成图片的块id
					 success: function (res) {
					   that.zstImage = res.tempFilePath;
					   console.log("that.zstImage",that.zstImage);
					 },
					 fail: function (res) {
					 }
				},that)
			},
			showLineA(canvasId) {
			    let chartData=this.chartsDataLine;
				canvaLineA = new uCharts({
			        context:uni.createCanvasContext(canvasId, _self),
					type: 'area', //类型
					fontSize: 13, //字体大小
			        color:['#ff0000','#FAC858'],
					padding: [20, 10, 20, 10], //空白区域值
					legend: { show: false,},
					dataLabel: false, //显示数据标签内容值
					dataPointShape: false,
					background: 'rgba(255,255,255,1)',
					pixelRatio: this.pixelRatio,
					categories: chartData.categories, //数据类别
					series: chartData.series, //数据列表
					animation: false,
					enableScroll: false, //开启图表拖拽功能
			        width:this.cWidth*this.pixelRatio, //canvas宽度，单位为px
			        height:this.cHeight*this.pixelRatio, //canvas高度，单位为px
					xAxis: { //X轴配置
						disableGrid: true,//不绘制纵向网格(即默认绘制网格)
			            axisLine:true,//坐标轴线
			            // axisLineColor:'#666',//坐标轴颜色
			            calibration:true,//坐标轴刻度线
						marginTop:10,
			            // fontColor:'#000', //刻度线和文字颜色
						gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
						// itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						rotateLabel: true,
			            rotateAngle:45,
			            calibration:true,
			            fontSize:13,
					},
					yAxis: { 
						data:[{unit:'元',}],//data:[{unit:'元',}]
						disabled:false,
						splitNumber:this.SplitNumber,
						gridType: 'dash', //网格线条是实线还是虚线
					},
					extra: { //扩展配置
						lineStyle: 'curve' ,//曲线  curve曲线，straight直线
			            tooltip:{fontSize:15,lineHeight:20,boxPadding:10,},
			            area:{type:'step',addLine:true,gradient:false,}
			            
					},
				});
				let that=this;
				setTimeout(function(){
					console.log("转成图片");
					that.toTempFilePath(); //转成图片
				},100)
			
			
			},

		},
	}
</script>
<style>
</style>
<style scoped lang="less">
	.wrap{
		.swiper{
			height:460rpx;
			position: relative;
			.bg{
				width: 100vw;
				height: 460rpx;
				background-size:100%;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				z-index: 1;
				
			}
			.hb-code{
				position: absolute;
				left: 12rpx;
				bottom: 12rpx;
				z-index: 3;
				width: 200rpx;
				height: 200rpx;
				background-size: 100% 100%;
			}
			.hb-btn{
				width: 180rpx;
				height:50rpx;
				line-height: 50rpx;
				background: #ee2243;
				color: #fff;
				text-align: center;
				font-size: 26rpx;
				border-radius: 25rpx;
				position: absolute;
				right:32rpx;
				top: 32rpx;
				z-index: 3;
				cursor: pointer;
			}
			
		}
		.ul-li-loading{
			text-align: center;
			color: #666;
			height: 100rpx;
			line-height: 100rpx;
		}
		.card{
			background: #fff;
			box-sizing: border-box;
			padding:0 32rpx;
			overflow: hidden;
			.card-top{
				margin: 32rpx 0;
				.card-title{
					.card-title-icon{
						width: 8rpx;
						height: 30rpx;
						border-radius: 2rpx;
						margin-right: 10rpx;
						
						
					}
					.card-title-text{
						color: #000;
						font-weight: 500;
						font-size: 34rpx;
					}
					
				}
				.card-btn{
					width: 150rpx;
					height: 50rpx;
					border-radius: 30rpx;
					color: #fff;
					font-size: 26rpx;
					
					
				}
				.card-nav{
				    border: 1rpx #fff solid;
					border-radius: 30rpx;
					height: 44rpx;
					overflow: hidden;
					.card-nav-item{
						width: 100rpx;
						height: 100%;
						text-align: center;
						
						font-size: 26rpx;
						// background: #ccc;
						.card-nav-item-text{
							border-right: 1rpx #eee solid;
							width: 100%;
							height: 30rpx;
							
							// background: #999;
						}
						
					}
					
					:nth-last-of-type(1) .card-nav-item-text{
						border-right:0;
					}
					
				}
			}
			
			.card-content{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-bottom: 20rpx;
				.price{
					width: 46%;
					height: 50rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					text{
						margin-right: 4rpx;
						color: #333;
						font-size: 26rpx;
					}
					
				}
			}
			
			
		}
	
	    .list-box{
	     	font-size: 28rpx;
	     	.list-bar{
	     		background: #f8f8f8;
	     		height: 100rpx;
	     		padding: 0 20rpx;
	     		
	     		
	     	}
	     	.list-table{
	     		.list-li{
	     			height: 110rpx;
	     			padding: 0 20rpx;
	     			border-bottom:1rpx #f0f0f0 solid ;
	     		}
	     	}
	     	
	     	.bar1{
	     		width: 170rpx;
	     		padding-left: 10rpx;
	     		text-align: left;
	     	}
	     	.bar2{
	     		width: 120rpx;
	     		text-align: center;
	     		overflow: hidden;
	     	}
	     	.bar3{
	     		width: 100rpx;
	     		text-align: center;
	     	}
	     	.bar4{
	     		width: 110rpx;
	     		text-align: center;
	     		.btn{
	     			width: 100%;
	     			border-radius: 20rpx;
	     			color: #fff;
	     		}
	     	}
	     	.bar5{
	     		width: 150rpx;
	     		text-align: center;
	     	}
	     	
	    }
		.dialog{
			width: 520rpx;
			border-radius: 20rpx;
			background: #fff;
			padding:20rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content:center;
			overflow: hidden;
			.t1{
				color: #000;
				font-weight: 500;
				font-size: 36rpx;
				margin-bottom: 30rpx;
				text-align: center;
				
			}
			.btn{
				width: 260rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				border-radius: 80rpx;
				// margin: 20rpx 0 ;
				margin-top: 40rpx;
				font-weight: 400;
				box-sizing: border-box;
			}
			.red{
				color: #ee2243;
				border:1rpx #ee2243 solid ;
				transition: all 1s;
			}
			.blue{
				color: #1ad;
				border:1rpx #1ad solid ;
				transition: all 1s;
			}
			.checked1{
				color: #fff;
				border: none;
				background: #ee2243;
			   transform: scale(1.2);
			   
			}
			.checked2{
				color: #fff;
				border: none;
				background: #1ad;
				transform: scale(1.2);
			}
			
			.btn-s{
				color: #fff;
			}
			.btn-k{
				border: 1rpx #fff solid;
			}
			.btn-c{
				color: #ccc;
				border: 1rpx #ccc solid;
			}
			.submit-btn{
				width: 100%;
				margin: 10rpx 0;
			}
			.button-hover {
			  opacity: 0.5;
			  /* 点击时的样式 */
			}
			.line{
				border-bottom: 1rpx #ccc dashed;
				width: 100%;
				height: 1rpx;
				margin: 40rpx 0 20rpx 0;
			}
			.t2{
				width: 100%;
				font-size: 28rpx;
				margin: 10rpx 0;
			}
			.t3{
				width: 100%;
				color: #333;
				font-size: 26rpx;
				margin: 10rpx 0;
				margin-bottom: 20rpx;
			}
			.price-picker{
				background: #eee;
				padding: 0 20rpx;
				width: 100%;
				box-sizing: border-box;
				border-radius: 10rpx;
				min-height: 80rpx;
				font-weight: 500;
				
				
				
				
				
			}
		}
	
	}
</style>